
                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                    </svg>
                    <h2><a name="t0"></a><a id="_0"></a>背景</h2> 
<hr> 
<p><span class="words-blog hl-git-1" data-tit="华为云" data-pretit="华为云">华为云</span>服务提供了统一认证的云服务，支持手机、邮箱等自定义登录服务，并且提供了免费使用的额度，这样子方便中小企业或者项目快速的开发工作。下面是支持的认证方式：<br> <img src="https://i-blog.csdnimg.cn/blog_migrate/2349be506fa1260cdd4364898635638a.png" alt=""></p> 
<h2><a name="t1"></a><a id="_5"></a>操作步骤</h2> 
<h3><a name="t2"></a><a id="1AGCAppGallery_Connect_6"></a>1.<a href="https://so.csdn.net/so/search?q=AGC&amp;spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=AGC&amp;spm=1001.2101.3001.7020&quot;,&quot;extra&quot;:&quot;{\&quot;searchword\&quot;:\&quot;AGC\&quot;}&quot;}" data-tit="AGC" data-pretit="agc">AGC</a>(AppGallery Connect)创建项目</h3> 
<p>在AGC界面创建自己的<span class="words-blog hl-git-1" data-tit="云服务" data-pretit="云服务">云服务</span>项目（详细可看上篇文章<a href="https://developer.huawei.com/consumer/cn/forum/topic/0212159191168776257?fid=0101271690375130218" rel="nofollow">【HarmonyOS】端云一体化初始化项目</a>），并开通认证服务，如下图：<br> <img src="https://i-blog.csdnimg.cn/blog_migrate/4d76435c9d34d270bbe7bc13eea2fe37.png" alt=""></p> 
<p>启用手机号码和邮箱地址服务：</p> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/4fc3fcbcb20de66d9c9be769f3c4c136.png" alt=""></p> 
<h3><a name="t3"></a><a id="2_14"></a>2.添加项目配置文件</h3> 
<p>在AGC的项目界面下载agconnect-services.json文件，并添加到本地的项目文件中。<br> <img src="https://i-blog.csdnimg.cn/blog_migrate/c5759ac0b367f20c45d706701a20a17e.png" alt=""></p> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/4824f28ef3bac175b5a7be2609b871fc.png" alt=""></p> 
<h3><a name="t4"></a><a id="3_20"></a>3.添加与云服务相关的第三方库</h3> 
<ul><li>在项目的终端中，输入 cd entry 进入entry目录</li><li>安装SDK</li></ul> 
<pre data-index="0" class="set-code-show prettyprint" name="code"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;">ohpm install @hw<span class="token operator">-</span>agconnect<span class="token operator">/</span>hmcore
ohpm install @hw<span class="token operator">-</span>agconnect<span class="token operator">/</span>cloud
<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.452026;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:0,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<p>可以在entry-&gt;oh-package.json5文件中可以查看添加的第三方库和对应的版本号，可以看到添加了 @hw-agconnect/hmcore和 @hw-agconnect/cloud两个第三方库。<br> <img src="https://i-blog.csdnimg.cn/blog_migrate/d6d2aa136401fbd1419a383d866ae2da.png" alt=""></p> 
<h2><a name="t5"></a><a id="_31"></a>示例使用手机验证码实现登录功能</h2> 
<h3><a name="t6"></a><a id="_32"></a>验证码的操作示意图</h3> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/344cef8e9fc0991bd70d7d27306de6e6.png" alt=""></p> 
<h3><a name="t7"></a><a id="1_35"></a>1.搭建初始化界面</h3> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/b28b8d3aab38674cd4f047d41b789545.png" alt=""></p> 
<pre data-index="1" class="set-code-show prettyprint" name="code"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@kit.ArkUI'</span><span class="token punctuation">;</span>

@Entry
@Component
struct Index <span class="token punctuation">{<!-- --></span>
  <span class="token comment">//手机号码</span>
  @State TelNumber<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token comment">//验证码</span>
  @State VerifyNumber<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>

  <span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function">Column</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token function">TextInput</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">"请输入手机号"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"80%"</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span>InputType<span class="token punctuation">.</span>PhoneNumber<span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>TelNumber <span class="token operator">=</span> value<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token function">Row</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token function">TextInput</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">"请输入验证码"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"50%"</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span>InputType<span class="token punctuation">.</span>Number<span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>VerifyNumber <span class="token operator">=</span> value<span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token function">Button</span><span class="token punctuation">(</span><span class="token string">"获取验证码"</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">fontSize</span><span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">layoutWeight</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">margin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"80%"</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">margin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>

      <span class="token function">Button</span><span class="token punctuation">(</span><span class="token string">"登录"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">onClick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">event</span><span class="token operator">:</span> ClickEvent</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
        
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"80%"</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token string">'100%'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">'100%'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">padding</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">backgroundColor</span><span class="token punctuation">(</span><span class="token function">$r</span><span class="token punctuation">(</span><span class="token string">'app.color.start_window_background'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">alignItems</span><span class="token punctuation">(</span>HorizontalAlign<span class="token punctuation">.</span>Center<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.452026;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:1,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<h3><a name="t8"></a><a id="2_89"></a>2.云服务认证使用初始化</h3> 
<p>修改EntryAbility文件代码进行初始化</p> 
<ul><li>添加import { initialize } from ‘@hw-agconnect/hmcore’</li><li>添加配置的JSON文件路径 ：import serciceJson from ‘…/…/resources/rawfile/agconnect-services.json’</li><li>在OnCreate方法中添加初始化代码</li></ul> 
<p>修改示意图：<br> <img src="https://i-blog.csdnimg.cn/blog_migrate/e563d34d065d767e848d279b04277692.png" alt=""><br> 整体代码如下：</p> 
<pre data-index="2" class="set-code-show prettyprint" name="code"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> abilityAccessCtrl<span class="token punctuation">,</span> AbilityConstant<span class="token punctuation">,</span> PermissionRequestResult<span class="token punctuation">,</span> UIAbility<span class="token punctuation">,</span> Want <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@kit.AbilityKit'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> hilog <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@kit.PerformanceAnalysisKit'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> window <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@kit.ArkUI'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> initialize <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@hw-agconnect/hmcore'</span>
<span class="token keyword">import</span> serciceJson <span class="token keyword">from</span> <span class="token string">'../../resources/rawfile/agconnect-services.json'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">EntryAbility</span> <span class="token keyword">extends</span> <span class="token class-name">UIAbility</span> <span class="token punctuation">{<!-- --></span>
  <span class="token function">onCreate</span><span class="token punctuation">(</span>want<span class="token operator">:</span> Want<span class="token punctuation">,</span> <span class="token literal-property property">launchParam</span><span class="token operator">:</span> AbilityConstant<span class="token punctuation">.</span>LaunchParam<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">try</span> <span class="token punctuation">{<!-- --></span>
      <span class="token function">initialize</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">,</span> serciceJson<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      hilog<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'AGConnectError'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">let</span> AtManager <span class="token operator">=</span> abilityAccessCtrl<span class="token punctuation">.</span><span class="token function">createAtManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    AtManager<span class="token punctuation">.</span><span class="token function">requestPermissionsFromUser</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'ohos.permission.READ_MEDIA'</span><span class="token punctuation">,</span> <span class="token string">'ohos.permission.MEDIA_LOCATION'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">data</span><span class="token operator">:</span> PermissionRequestResult</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
        hilog<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'%{public}s'</span><span class="token punctuation">,</span> <span class="token string">'request permissions from user success'</span> <span class="token operator">+</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">err</span><span class="token operator">:</span> Object</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
        hilog<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'Failed to request permissions from user. Cause: %{public}s'</span><span class="token punctuation">,</span>
          <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    hilog<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'%{public}s'</span><span class="token punctuation">,</span> <span class="token string">'Ability onCreate'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">onDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{<!-- --></span>
    hilog<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'%{public}s'</span><span class="token punctuation">,</span> <span class="token string">'Ability onDestroy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">onWindowStageCreate</span><span class="token punctuation">(</span>windowStage<span class="token operator">:</span> window<span class="token punctuation">.</span>WindowStage<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// Main window is created, set main page for this ability</span>
    hilog<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'%{public}s'</span><span class="token punctuation">,</span> <span class="token string">'Ability onWindowStageCreate'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    windowStage<span class="token punctuation">.</span><span class="token function">loadContent</span><span class="token punctuation">(</span><span class="token string">'pages/Index'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">.</span>code<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        hilog<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'Failed to load the content. Cause: %{public}s'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      hilog<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'Succeeded in loading the content. Data: %{public}s'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">onWindowStageDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// Main window is destroyed, release UI related resources</span>
    hilog<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'%{public}s'</span><span class="token punctuation">,</span> <span class="token string">'Ability onWindowStageDestroy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">onForeground</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// Ability has brought to foreground</span>
    hilog<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'%{public}s'</span><span class="token punctuation">,</span> <span class="token string">'Ability onForeground'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">onBackground</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// Ability has back to background</span>
    hilog<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token number">0x0000</span><span class="token punctuation">,</span> <span class="token string">'testTag'</span><span class="token punctuation">,</span> <span class="token string">'%{public}s'</span><span class="token punctuation">,</span> <span class="token string">'Ability onBackground'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.452026;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:2,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<h3><a name="t9"></a><a id="_159"></a>发送验证码</h3> 
<p>输入手机号码后点击获取验证码按钮，然后获取登录的验证码短信。短信截图如下：<br> <img src="https://i-blog.csdnimg.cn/blog_migrate/cec72ddc7e71cded51207710c60370e4.jpeg" alt=""></p> 
<p>完整代码：</p> 
<pre data-index="3" class="set-code-show prettyprint" name="code"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@kit.ArkUI'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> cloud <span class="token keyword">from</span> <span class="token string">'@hw-agconnect/cloud'</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> Auth<span class="token punctuation">,</span> VerifyCodeAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@hw-agconnect/cloud'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> hilog <span class="token keyword">from</span> <span class="token string">'@ohos.hilog'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> json <span class="token keyword">from</span> <span class="token string">'@ohos.util.json'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> <span class="token constant">JSON</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@kit.ArkTS'</span><span class="token punctuation">;</span>

@Entry
@Component
struct Index <span class="token punctuation">{<!-- --></span>
  <span class="token comment">//手机号码</span>
  @State TelNumber<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token comment">//验证码</span>
  @State VerifyNumber<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>

  <span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function">Column</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token function">TextInput</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">"请输入手机号"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"80%"</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span>InputType<span class="token punctuation">.</span>PhoneNumber<span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>TelNumber <span class="token operator">=</span> value<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token function">Row</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token function">TextInput</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">"请输入验证码"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"50%"</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span>InputType<span class="token punctuation">.</span>Number<span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>VerifyNumber <span class="token operator">=</span> value<span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token function">Button</span><span class="token punctuation">(</span><span class="token string">"获取验证码"</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">fontSize</span><span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">layoutWeight</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">margin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">onClick</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">try</span> <span class="token punctuation">{<!-- --></span>
              <span class="token keyword">await</span> cloud<span class="token punctuation">.</span><span class="token function">auth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">requestVerifyCode</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
                <span class="token literal-property property">verifyCodeType</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
                  <span class="token literal-property property">kind</span><span class="token operator">:</span> <span class="token string">"phone"</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">phoneNumber</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>TelNumber<span class="token punctuation">,</span>
                  <span class="token literal-property property">countryCode</span><span class="token operator">:</span> <span class="token string">"86"</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token literal-property property">action</span><span class="token operator">:</span> VerifyCodeAction<span class="token punctuation">.</span><span class="token constant">REGISTER_LOGIN</span><span class="token punctuation">,</span>
                <span class="token literal-property property">lang</span><span class="token operator">:</span> <span class="token string">"zh_CN"</span><span class="token punctuation">,</span>
                <span class="token literal-property property">sendInterval</span><span class="token operator">:</span> <span class="token number">60</span>
              <span class="token punctuation">}</span><span class="token punctuation">)</span>
              hilog<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'VerifyCode'</span><span class="token punctuation">,</span> <span class="token string">"Success"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
              AlertDialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"错误"</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">"验证码发送失败"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
              hilog<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'VerifyCode'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"80%"</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">margin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>

      <span class="token function">Button</span><span class="token punctuation">(</span><span class="token string">"登录"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">onClick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">event</span><span class="token operator">:</span> ClickEvent</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>

      <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"80%"</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token string">'100%'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">'100%'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">padding</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">backgroundColor</span><span class="token punctuation">(</span><span class="token function">$r</span><span class="token punctuation">(</span><span class="token string">'app.color.start_window_background'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">alignItems</span><span class="token punctuation">(</span>HorizontalAlign<span class="token punctuation">.</span>Center<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.452026;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:3,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<p>主要调用requestVerifyCode方法去获取验证码信息，传入VerifyCodeParam类型对象。</p> 
<p>VerifyCodeParam的属性解析：</p> 
<ul><li>verifyCodeType ：PhoneVerifyCode对象，主要输入phoneNumber和countryCode对象。</li><li>action ： 枚举值，选择获取验证码的类型</li><li>lang ： 语言</li><li>sendInterval ： 重复发送的时间间隔</li></ul> 
<h3><a name="t10"></a><a id="_246"></a>根据验证码实现登录功能</h3> 
<p>实现登录效果</p> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/e73ccebc2a65f3225b7e16ddb92cef84.png" alt=""></p> 
<pre data-index="4" class="set-code-show prettyprint" name="code"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@kit.ArkUI'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> cloud <span class="token keyword">from</span> <span class="token string">'@hw-agconnect/cloud'</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> Auth<span class="token punctuation">,</span> VerifyCodeAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@hw-agconnect/cloud'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> hilog <span class="token keyword">from</span> <span class="token string">'@ohos.hilog'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> json <span class="token keyword">from</span> <span class="token string">'@ohos.util.json'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> <span class="token constant">JSON</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@kit.ArkTS'</span><span class="token punctuation">;</span>

@Entry
@Component
struct Index <span class="token punctuation">{<!-- --></span>
  <span class="token comment">//手机号码</span>
  @State TelNumber<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token comment">//验证码</span>
  @State VerifyNumber<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>

  <span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function">Column</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token function">TextInput</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">"请输入手机号"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"80%"</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span>InputType<span class="token punctuation">.</span>PhoneNumber<span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>TelNumber <span class="token operator">=</span> value<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token function">Row</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token function">TextInput</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">"请输入验证码"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"50%"</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span>InputType<span class="token punctuation">.</span>Number<span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>VerifyNumber <span class="token operator">=</span> value<span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token function">Button</span><span class="token punctuation">(</span><span class="token string">"获取验证码"</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">fontSize</span><span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">layoutWeight</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">margin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span>
          <span class="token punctuation">.</span><span class="token function">onClick</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">try</span> <span class="token punctuation">{<!-- --></span>
              <span class="token keyword">await</span> cloud<span class="token punctuation">.</span><span class="token function">auth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">requestVerifyCode</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
                <span class="token literal-property property">verifyCodeType</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
                  <span class="token literal-property property">kind</span><span class="token operator">:</span> <span class="token string">"phone"</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">phoneNumber</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>TelNumber<span class="token punctuation">,</span>
                  <span class="token literal-property property">countryCode</span><span class="token operator">:</span> <span class="token string">"86"</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token literal-property property">action</span><span class="token operator">:</span> VerifyCodeAction<span class="token punctuation">.</span><span class="token constant">REGISTER_LOGIN</span><span class="token punctuation">,</span>
                <span class="token literal-property property">lang</span><span class="token operator">:</span> <span class="token string">"zh_CN"</span><span class="token punctuation">,</span>
                <span class="token literal-property property">sendInterval</span><span class="token operator">:</span> <span class="token number">60</span>
              <span class="token punctuation">}</span><span class="token punctuation">)</span>
              hilog<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'VerifyCode'</span><span class="token punctuation">,</span> <span class="token string">"Success"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
              AlertDialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"错误"</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">"验证码发送失败"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
              hilog<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'VerifyCode'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"80%"</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">margin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>

      <span class="token function">Button</span><span class="token punctuation">(</span><span class="token string">"登录"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">onClick</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">event</span><span class="token operator">:</span> ClickEvent</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">try</span> <span class="token punctuation">{<!-- --></span>
          <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> cloud<span class="token punctuation">.</span><span class="token function">auth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">signIn</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
            <span class="token literal-property property">credentialInfo</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
              <span class="token literal-property property">kind</span><span class="token operator">:</span> <span class="token string">"phone"</span><span class="token punctuation">,</span>
              <span class="token literal-property property">countryCode</span><span class="token operator">:</span> <span class="token string">"86"</span><span class="token punctuation">,</span>
              <span class="token literal-property property">phoneNumber</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>TelNumber<span class="token punctuation">,</span>
              <span class="token literal-property property">verifyCode</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>VerifyNumber
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
          AlertDialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"登录"</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">"登录成功！！！"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
          AlertDialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"错误"</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">"登录失败"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
          hilog<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'Login'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">"80%"</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token string">'100%'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token string">'100%'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">padding</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">backgroundColor</span><span class="token punctuation">(</span><span class="token function">$r</span><span class="token punctuation">(</span><span class="token string">'app.color.start_window_background'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">alignItems</span><span class="token punctuation">(</span>HorizontalAlign<span class="token punctuation">.</span>Center<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.452026;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:4,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<p>主要调用auth的signIn方法，并传入对应的电话号码和验证码。<br> SignInParam对象</p> 
<ul><li>credentialInfo: CredentialInfo对象，设置电话号码和前缀，可以选择密码登录或者验证码登录</li><li>autoCreateUser?: boolean; 设置当没有当前对象存在时，是否需要自动生成用户。</li></ul> 
<h2><a name="t11"></a><a id="_347"></a>总结</h2> 
<p>以上示例仅仅对统一认证流程的讲解，其中完整的逻辑判断并没有添加，可以根据自己的需求来添加相应的逻辑判断</p>
                